<template>
    <section>
        <div>
            <div class="top-img-container">
            <img class="first-img" src="static/images/1.png">
            </div>
            <div class="mid-img-container">
                <img src="static/images/2.png">
                <img src="static/images/3.png">
            </div>
            <div class="bottom-img">
                <img class="last-img" src="static/images/4.png">
            </div>
            <div>
                
            </div>
        </div>
    </section>
</template>
<script>
export default {
    name: 'popularize'
}
</script>
<style lang="scss" scoped>
section{
    background: #eee;
}
.top-img-container{
    width: 100%;
    height: 4.6rem;
    overflow: hidden;
    margin-bottom: 0.2rem;
}
img{
    display: block;
    border: none;
}
.first-img{
    width: 100%;
    height: 4.68rem;
}
.mid-img-container{
    position: relative;
    height: 3.5rem;
    width: 100%;
    margin-bottom: 0.2rem;
    img{
        position: absolute;
    }
    img:nth-child(1){
        width: 5.64rem;
        height: 3.54rem;
        left: 0;
    }
    img:nth-child(2){
        width: 3.8rem;
        height: 3.5rem;
        right: 0;
    }
}
.bottom-img{
    overflow: hidden;
    width: 100%;
    background: #fff;
    margin-bottom: 0.2rem;
    .last-img{
        width: 100%;
        height: 4.18rem;
    }
}

</style>
